@import '@material/chips/mixins.import';
@import '../../material/core/style/layout-common';
@import '../../cdk/a11y/a11y';
@import '../mdc-helpers/mdc-helpers';

@include mdc-chip-without-ripple($query: $mat-base-styles-query);
@include mdc-chip-set-core-styles($query: $mat-base-styles-query);

.mat-mdc-chip {
  // MDC uses a pointer cursor
  cursor: default;

  &._mat-animation-noopable {
    // MDC's chip removal works by toggling a class on the chip, waiting for its transitions
    // to finish and emitting the remove event at the end. The problem is that if our animations
    // were disabled via the `NoopAnimationsModule`, the element won't have a transition and
    // `transitionend` won't fire. We work around the issue by assigning a very short transition.
    transition-duration: 1ms;

    // Disables the chip enter animation.
    animation: none;

    .mdc-chip__checkmark-svg {
      transition: none;
    }
  }

  @include cdk-high-contrast(active, off) {
    outline: solid 1px;

    &:focus {
      // Use 2px here since the dotted outline is a little thinner.
      outline: dotted 2px;
    }
  }
}

// The ripple container should match the bounds of the entire chip.
.mat-mdc-chip-ripple {
  @include mat-fill;

  // Disable pointer events for the ripple container and state overlay because the container
  // will overlay the user content and we don't want to disable mouse events on the user content.
  // Pointer events can be safely disabled because the ripple trigger element is the host element.
  pointer-events: none;

  // Inherit the border radius from the parent so that state overlay and ripples don't exceed the
  // parent button boundaries.
  border-radius: inherit;
}

// The MDC chip styles related to hover and focus states are intertwined with the MDC ripple styles.
// We currently don't use the MDC ripple due to size concerns, therefore we need to add some
// additional styles to restore these states.
.mdc-chip__ripple {
  @include mdc-ripple-target-common($query: structure);

  &::after, &::before {
    @include mat-fill;
    content: '';
    pointer-events: none;
    opacity: 0;
    border-radius: inherit;

    ._mat-animation-noopable & {
      transition: none;
    }
  }
}

// Angular Material supports disabled chips, which MDC does not.
// Dim the disabled chips and stop MDC from changing the icon color on click.
.mat-mdc-chip-disabled.mat-mdc-chip {
  opacity: 0.4;

  .mat-mdc-chip-trailing-icon, .mat-mdc-chip-row-focusable-text-content {
    pointer-events: none;
  }

  // Do not show state interactions for disabled chips.
  .mdc-chip__ripple::after, .mdc-chip__ripple::before {
    display: none;
  }
}

// Angular Material supports vertically-stacked chips, which MDC does not.
.mat-mdc-chip-set-stacked {
  flex-direction: column;
  align-items: flex-start;

  .mat-mdc-chip {
    width: 100%;
  }
}

// Add styles for the matChipInputFor input element.
$mat-chip-input-width: 150px;

input.mat-mdc-chip-input {
  flex: 1 0 $mat-chip-input-width;
}

// The margin value is set in MDC.
$mat-mdc-chip-margin: 4px;

// Don't let the chip margin increase the mat-form-field height.
.mat-mdc-chip-grid {
  margin: -$mat-mdc-chip-margin;

  // Keep the mat-chip-grid height the same even when there are no chips.
  input.mat-mdc-chip-input {
    margin: $mat-mdc-chip-margin;
  }
}

.mdc-chip__checkmark-path {
  ._mat-animation-noopable & {
    transition: none;
  }

  @include cdk-high-contrast(black-on-white, off) {
    // SVG colors won't be changed in high contrast mode and since the checkmark is white
    // by default, it'll blend in with the background in black-on-white mode. Override the color
    // to ensure that it's visible. We need !important, because the theme styles are very specific.
    stroke: #000 !important;
  }
}

// Needed for the focus indicator.
.mat-mdc-chip-row-focusable-text-content {
  position: relative;
}

.mat-mdc-chip-row-focusable-text-content,
.mat-mdc-chip-remove-icon {
  display: flex;
  align-items: center;
}

.mat-mdc-chip-content {
  display: inline-flex;
}

.mdc-chip--editing {
  background-color: transparent;
  display: flex;
  flex-direction: column;

  .mat-mdc-chip-content {
    pointer-events: none;
    height: 0;
    overflow: hidden;
  }
}

.mat-chip-edit-input {
  cursor: text;
  display: inline-block;
}

.mat-mdc-chip-edit-input-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
